//  现金流录入: CashFlowFntry

import React, { useState } from 'react'
import 'antd/dist/antd.css'
import './index.scss'

import { Select, Form, Input, DatePicker, Space, Button, Table, Modal } from 'antd'


// 表格数据列表对象
const data = []
for (let i = 1; i <= 46; i++) {
    data.push({
        key: i,
        serial_number: 'prv011111111',
        time: '2018/01/01',
        abstract: 'GPS安装费',
        entry_time: '2018-10-06 14:36:36',
        remarks: 'xasdlfjlagljgal',
    })
}

const columns = [
    {
        title: '流水编号',
        dataIndex: 'serial_number',
        key: 'serial_number',
        align: 'center',
    },
    {
        title: '交易日期',
        dataIndex: 'time',
        key: 'time',
        align: 'center',
    },
    {
        title: '摘要',
        dataIndex: 'abstract',
        key: 'abstract',
        align: 'center',
    },
    {
        title: '录入时间',
        dataIndex: 'entry_time',
        key: 'entry_time',
        align: 'center',
    },
    {
        title: '备注',
        dataIndex: 'remarks',
        key: 'remarks',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'key',
        align: 'center',
        width: 200,
        render: text =>
            <div className="spans">
                <Button size="small">编辑</Button>
                <Button size="small" type="dashed" danger>删除</Button>
            </div>
    },

]

export default function CashFlowFntry() {
    const { RangePicker } = DatePicker

    const [stat, getState] = useState(false);

    const daoru = () => {
        getState(true)
    }

    const handleOk = () => {
        getState(false);
    };

    const handleCancel = () => {
        getState(false);
    };

    return (
        <div className='cashFlowFntry'>
            {/* 头部搜索及输入框 */}
            <div className="bank_head">
                <Form layout="inline">

                    <Form.Item className="select">
                        <Select placeholder="流水类型">
                            <Select.Option value="demo">对方账号</Select.Option>
                            <Select.Option value="demo">借方账号</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </Form.Item>

                    <Form.Item className="chaxun">
                        <Button type="primary">查询</Button>
                    </Form.Item>
                </Form>
            </div>

            {/* 表格主体 */}
            <div className='bank_body'>
                {/* 表格头 */}
                <div className="bank_body_head">
                    <p className="text">数据列表</p>

                    <div className="body_head_right">

                        <Button type="primary" onClick={daoru}>新增流水</Button>
                        <Button>导出</Button>
                    </div>
                </div>
                {/* 表格主体 */}
                <Table bordered columns={columns} dataSource={data} />
            </div>

            {/* 导入弹框 */}
            <Modal className='daoru' title='现金流水录入' visible={stat} onOk={handleOk}
                onCancel={handleCancel} okText='确认' cancelText='取消' width='800px' height='600px'>
                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                    <Form.Item label=' 请输入流水编号：'>
                   <Input placeholder="请输入凭证号" style={{ width: '400px' }} />
                    </Form.Item>

                    <Form.Item label='交易时间：'>
                    <DatePicker />
                       
                    </Form.Item>

                    <Form.Item label='摘要：'>
                     <Select placeholder="请选择摘要" style={{ width: '400px' }}>
                            <Select.Option value="demo">对方账号</Select.Option>
                            <Select.Option value="demo">借方账号</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label='录入时间：'>
                     <DatePicker />
                    </Form.Item>


                    <Form.Item label='备注：'>
                    <Input.TextArea style={{ width: '400px' }} showCount maxLength={20} />
                    </Form.Item>
                </Form>
            </Modal>


        </div>
    )
}
